<!--
 * @Description: 生成二维码组件
 * @version: 1.0
 * @Date: 2023年12月06日23:13:38
-->
<template>
  <div class="container">
    <qrcode-vue :value="value" :size="size" :margin="margin" :render-as="renderAs" />
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import QrcodeVue, { RenderAs } from 'qrcode.vue'

defineProps({
  value: {
    type: String,
    required: true,
    default: ''
  },
  size: {
    type: Number,
    default: 100
  },
  margin: {
    type: Number,
    default: 4
  },
  colorDark: {
    type: String,
    default: '#000000'
  },
  colorLight: {
    type: String,
    default: '#ffffff'
  }
})

const renderAs = ref<RenderAs>('svg')
</script>

<style scoped lang="scss">
.container {
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
}
</style>
